<template>
    <div id="searchDefalt">
        <ul>
            <template v-for="item in hotlist">
                <li :key="item.id" @click="changeSong(item.first)">{{ item.first }}</li>
            </template>
        </ul>
    </div>
</template>

<script>
export default {
    async mounted() {
        this.hotlist = (await this._fetch("/search/hot")).result.hots
    },
    data() {
        return {
            hotlist: []
        }
    },
    methods: {
        changeSong(val) {
            this.$store.commit('changeInp', val)
            this.$store.commit('showSearRes')

        }
    }
}
</script>

<style lang="scss" >
#searchDefalt {
    > ul {
        margin-top: 10px;
        display: flex;
        flex-wrap: wrap;
        li {
            padding: _vw(10);
            border: 1px solid gainsboro;
            margin: _vw(5);
            border-radius: 5vw;
        }
    }
}
</style>